<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:sf="http://www.springframework.org/tags/faces"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:spring="http://www.springframework.org/tags"
                template="../../../layout/Template.xhtml">

    <ui:define name="menu">
        <ui:include src="${user.menu}"/>
    </ui:define>

    <ui:define name="title">
        <h:outputText value="#{resourceBundle.readCourseWelcome}"/>
    </ui:define>

    <ui:define name="content">
        <h:form id="readTrainingForm">
            <rich:panel id="readTrainingPanel" header="#{resourceBundle.readCourseWelcome}">

                <h:panelGrid id="readCourseGrid" columns="2">
                    <h:outputText value="#{resourceBundle.readCourseName} : "/>
                    <h:outputText value="#{currentCourse.name}"/>

                    <h:outputText value="#{resourceBundle.readTrainingNbMatter} : "/>
                    <h:outputText value="#{currentCourse.nbMatter}"/>

                    <a4j:commandButton id="readTrainingBackButton"
                                       value="#{bundle.backButton}" action="backToListCourse"/>


                </h:panelGrid>
                <rich:dataTable value="#{flowScope.listRequiredUnits}"
                                var="RequiredUnitDisplayed" border="1"
                                cellspacing="4"
                                width="100%"
                                id="unitDataTable"
                                rows="10">

                    <f:facet name="header">
                        <h:outputText value="#{resourceBundle.listRequiredUnitsFormHeader}"/>
                    </f:facet>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{resourceBundle.listRequiredUnitsFormName}"/>
                        </f:facet>
                        <h:outputText value="#{RequiredUnitDisplayed.name}"/>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{resourceBundle.listRequiredUnitsECTS}"/>
                        </f:facet>
                        <h:outputText value="#{RequiredUnitDisplayed.credit}"/>
                    </rich:column>

                    <f:facet name="footer">
                        <rich:datascroller align="center" for="unitDataTable"/>
                    </f:facet>

                </rich:dataTable>

                <rich:dataTable value="#{flowScope.listOptionalUnits}"
                                var="OptionalUnitDisplayed" border="1"
                                cellspacing="4"
                                width="100%"
                                id="unitDataTable"
                                rows="10">

                    <f:facet name="header">
                        <h:outputText value="#{resourceBundle.listOptinalUnitsFormHeader}"/>
                    </f:facet>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{resourceBundle.listRequiredUnitsFormName}"/>
                        </f:facet>
                        <h:outputText value="#{OptionalUnitDisplayed.name}"/>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{resourceBundle.listRequiredUnitsECTS}"/>
                        </f:facet>
                        <h:outputText value="#{OptionalUnitDisplayed.credit}"/>
                    </rich:column>

                    <f:facet name="footer">
                        <rich:datascroller align="center" for="unitDataTable"/>
                    </f:facet>

                </rich:dataTable>
            </rich:panel>
        </h:form>
    </ui:define>

</ui:composition>